<template>
  <div id="app">
    <EmployeeManagement v-if="viewMode === 'employee'"></EmployeeManagement>
    <JobPosition v-if="viewMode === 'position'"></JobPosition>
    <DeciveCategory v-if="viewMode === 'category'"></DeciveCategory>
    <ComponentManagement v-if="viewMode === 'component'"></ComponentManagement>
    <DeviceModelManagement
      v-if="viewMode === 'deviceModel'"
    ></DeviceModelManagement>
    <MainModel v-if="viewMode === 'deviceModelMain'"></MainModel>
    <Demo1 v-if="viewMode === 'demo1'"></Demo1>
    <!-- <draggle-demo></draggle-demo> -->
  </div>
</template>

<script>
import DeciveCategory from "./components/decive-category/index.vue";
import JobPosition from "./components/position/index.vue";
// import ExamDemo from "./components/train/exam-page.vue";
// import LessionList from "./components/train/lession/lession.vue";
// import DraggleDemo from "./components/draggle-demo/index.vue";
import EmployeeManagement from "./components/employee/index.vue";
import ComponentManagement from "./components/component/index.vue";
import DeviceModelManagement from "./components/device-model/index.vue";
import MainModel from "./components/device-model/MainModel.vue";
import Demo1 from "./components/demo/index.vue";

export default {
  name: "App",
  data() {
    return {
      viewMode: "demo1", // employee,position,category,deviceModel,component,deviceModelMain,demo1
    };
  },
  components: {
    Demo1,
    // demo1,
    // ExamDemo,
    // LessionList,
    MainModel,
    JobPosition,
    DeciveCategory,
    EmployeeManagement,
    ComponentManagement,
    DeviceModelManagement,
    // DraggleDemo,
  },
};
</script>

<style></style>
